<template>
  <view class="grid-section">
    <view class="grid-item" v-for="(item, index) in fullList" :key="index" @click="handleFullClick(item)">
      <up-image :src="item.icon" width="80rpx" height="80rpx" />
      <text class="grid-label">{{ item.label }}</text>
    </view>
  </view>
</template>

<script setup>
const fullList = [{
  label: "资产列表",
  icon: "/static/icons/list.png",
  url: "/pages/assetsPages/list?tabs=0",
},
  {
    label: "资产领用",
    icon: "/static/icons/gift.png",
    url: "/pages/assetsPages/list?tabs=1",
  },
  {
    label: "资产退库",
    icon: "/static/icons/back.png",
    url: "/pages/assetsPages/list?tabs=2",
  },
  {
    label: "资产变更",
    icon: "/static/icons/biangeng.png",
    url: "/pages/assetsPages/list?tabs=8",
  },
  {
    label: "资产报修",
    icon: "/static/icons/repair.png",
    url: "/pages/assetsPages/list?tabs=4",
  },
  {
    label: "资产报废",
    icon: "/static/icons/delete.png",
    url: "/pages/assetsPages/list?tabs=5",
  },
  {
    label: "资产维修",
    icon: "/static/icons/wrench.png",
    url: "/pages/assetsPages/list?tabs=6",
  },
  {
    label: "资产处置",
    icon: "/static/icons/dispose.png",
    url: "/pages/assetsPages/list?tabs=7",
  },
  {
    label: '物资找寻',
    icon: '/static/icons/seek.png',
    url: '/pages/assetSeek/seek'
  }
];

const handleFullClick = (item) => {
  uni.navigateTo({
    url: item.url,
  });
};
</script>

<style scoped lang="scss">
.grid-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
  padding: 40rpx;
  background-color: #f8f8f8;

  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    padding: 30rpx 10rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

    .grid-label {
      margin-top: 20rpx;
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
  }
}
</style>